<template>
	
	<div class="order-wrap" @click="orderFn">
		<slot>
		</slot>
		<!-- {{ props.value }} -->
		<span class="triangle">
			<i class="top" :class="{ topActive: props.value !== null && props.value== props.desc}"></i>
			<i class="bottom" :class="{ bottomActive: props.value !== null && props.value == props.asc}"></i>
		</span>
	</div>
</template>
<script setup>
import { ref, reactive, toRefs, watchEffect ,computed, watch,onUpdated,onBeforeUpdate,onBeforeMount,onMounted} from "vue";
// props接收数据
const props = defineProps({
	value: {
		type: [String, Number],
	},
	asc: {
		type: [String, Number],
		default: "asc",
	},
	desc: {
		type: [String, Number],
		default: "desc",
	},
});

const data = reactive({
	reverse: null, // 倒序
});

const emit = defineEmits(["refresh", 'update:value']);

//点击排序
const orderFn = () => {
	// debugger
	var total ;
	if (props.value == null) {
		total = props.asc;
	} else if (props.value === props.asc) {
		total = props.desc;
	} else if (props.value === props.desc) {
		total = props.asc;
	} else {
		console.warn("排序参数错误");
	}

	emit("update:value", total);
	emit("refresh", total);
};

// // props单个监听
// watch(() => props.value, (newValue, oldValue) => {
// 	// console.log(newValue);
	
// },
// 	{ deep: true, immediate: true }
// );


</script>
<style lang="less" scoped>
.order-wrap {
	// margin: 0 10px;
	cursor: pointer;
	display: inline-block;

	.text {
		display: inline-block;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3c456c;
	}

	.triangle {
		margin: 0 10px;
		display: inline-block;
		position: relative;
		vertical-align: sub;
		.top {
			top: -10px;
			width: 0;
			height: 0;
			position: absolute;
			display: inline-block;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-bottom: 5px solid #d4d8de;
			box-sizing: border-box;
		}

		.bottom {
			top: -2px;
			width: 0;
			height: 0;
			position: absolute;
			display: inline-block;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 5px solid #d4d8de;
			box-sizing: border-box;
		}

		.topActive {
			border-bottom: 5px solid #6995ff;
		}

		.bottomActive {
			border-top: 5px solid #6995ff;
		}
	}
}
</style>